<template>
	<view>
		
		<view
			class="u-flex u-flex-y-center u-flex-between user-box u-p-l-30 u-p-r-20 u-p-b-30"
			@click="openAuthorizationModal"
		>
			<view class="u-m-r-10">
				<u-avatar :src="userInfo.avatar_url" size="140"></u-avatar>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20" style="text-align: left">{{
					userInfo.nickname || "请先登录"
				}}</view>
			</view>

			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell icon="setting-fill" title="设置"></u-cell>
			</u-cell-group>
		</view>
	</view>
	<wx-user-info v-model="showAuthorizationModal"></wx-user-info>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/modules/user";
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);

let showAuthorizationModal = ref(false);

// 打开获取用户信息弹框
const openAuthorizationModal = () => {
	showAuthorizationModal.value = true;
};
</script>

<style lang="scss" scoped>
.user-box {
	background-color: #fff;
	padding: 30rpx;
}
:deep(.u-navbar__content__title) {
	color: rgb(122, 126, 131) !important;
}
</style>
